import { Card } from 'antd';
export interface ApplySceneryInfo{
    theme:string
    imgSrc:string,
    title:string,
    description:string
}
export default function ApplicationScenarios ({data}:{data:ApplySceneryInfo[]}) {
    return (
        <div id="part-3" className="w-full flex flex-col justify-center items-center py-[100px]">
            <p className="text-[25px]">应用场景</p>
            <div className="w-[1100px] flexCenter gap-8 flex-wrap mt-10">
                {data.map((item,index)=>{
                    return (
                        <Card
                            className="hover:shadow-lg transition duration-500 ease-in-out flex items-center"
                            key={index}
                            style={{ width: 540,height:240 }}
                        >
                            <div className="flex items-center">
                                <img src={item.imgSrc} alt="" className='w-[192px] h-[192px] mr-5 object-cover rounded-[5px]'/>
                                <Card.Meta title={item.title} description={item.description} />
                            </div>
                        </Card>
                    )
                })}
            </div>
        </div>
    )
}